<template>
	<view>

		<u-popup :show="showPoster" :round="10" @close="close" @open="open">
			<view class="over" :style="{height:height+'px'}">
				<view class="text-center over br-rd-10 pd-top-20">
					<image class="poster" mode="heightFix" :style="{height:heightImg+'px'}" :src="path" />
				</view>
				<view class="over" style="height: 70px;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="12">
							<view class="mg-top-5 pd-10">
								<u-button shape="circle" :color="color.primary" @click="saveImage" type="primary">{{$t('海报保存')}}</u-button>
							</view>
						</u-col>
					
					</u-row>

				</view>

			</view>
		</u-popup>


		<xlcanvas v-if="show" :param="param" @fail="imageFail"  @success="imageSuccess"></xlcanvas>
	</view>
</template>
<script>

	import {
		getPosterInfo
	} from '../../api/home';
	import {
		sharePosterData
	} from '../../api/poster';

	export default {

		data() {
			var w = uni.getStorageSync("systeminfo")
			return {

				show: false,
				showPoster:false,
				height: (w.windowHeight - 150),
				heightImg: (w.windowHeight - 250),
				postersData: {},
				posterImg: {},
				path: "",
				param: {
					width: 750, //画布宽度
					height: 1334, //画布高度
					fileType: "jpg", //保存文件类型
					quality: 1 //保存文件质量


				}


			}
		},


		mounted: function() {
			//	this.initPostersConfig();
			var the = this;
			//	the.getInfo()
		},

		methods: {
			getInfo: function(type, id,page='') {
				var the = this
				sharePosterData(id, type,page).then(res => {
					console.log(res)
					var param = {
						width: 750, //画布宽度
						height: 1334, //画布高度
						fileType: "jpg", //保存文件类型
						quality: 1, //保存文件质量
						...res
					}
					//	console.log(param)
					the.param = param;
					the.show = true;
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.showPoster=false
				// console.log('close');
			},
			saveImage: function() {


				var path = this.path //base64编码
				var the = this
				var number = Math.random()
			
						console.log(path)
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: function(res) {
								uni.showToast({
									title: '保存成功',
								})
								the.show = false
							},
							fail: function(err) {
								console.log(err)
							}
						})
				



			},
			init: function(type, id,page='') {
				uni.showLoading({

				})
				console.log(type, id)

				this.getInfo(type, id,page)
			},
			imageSuccess: function(item) {
				var permessionimg = "permessionimg";
				var res = item.res;
				var the = this;
				console.log(item, res)
				var path = res.tempFilePath;
				console.log(path)
				the.path = path
					the.showPoster = true
				uni.hideLoading();

			},
			imageFail:function(){
				this.show = false
				this.showPoster=false
						uni.hideLoading();
			}

		}
	}
</script>

<style>
	.over {
		overflow: hidden;
	}

	.poster {
		width: 100%;
	}
</style>